import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { subNumber } from '../store/features/counter'

export class Profile extends PureComponent {
  render() {
    const { counter, banners, recommends } = this.props

    return (
      <div>
        <h2>Profile Counter: {counter}</h2>
        <button onClick={(e) => this.subNumber(5)}>-5</button>
        <button onClick={(e) => this.subNumber(8)}>-8</button>

        <div className="banner">
          <h2>轮播图数据</h2>
          <ul>
            {banners.map((item, index) => (
              <li key={index}>{item.title}</li>
            ))}
          </ul>
        </div>

        <div className="recommend">
          <h2>推荐数据</h2>
          <ul>
            {recommends.map((item, index) => (
              <li key={index}>{item.title}</li>
            ))}
          </ul>
        </div>
      </div>
    )
  }

  subNumber(num) {
    this.props.subNumber(num)
  }
}

const mapStateToProps = (state) => {
  return {
    counter: state.counter.counter,
    banners: state.home.banners,
    recommends: state.home.recommends,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    subNumber(num) {
      dispatch(subNumber(num))
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Profile)
